<template>
  <div class="flex-1 flex-ver">
    <div class="flex-center">
      <el-date-picker v-model="value1" type="monthrange" range-separator="至" start-placeholder="开始月份"
        end-placeholder="结束月份" value-format="timestamp" @change="onChange">
      </el-date-picker>
      <p class="ml16">
        <el-button type="primary" size="medium " @click="goInfo">查看详情</el-button>
      </p>
    </div>
    <div class="flex-1 flex-center">
      <div ref="SCEchart" class="SCEchart"></div>
    </div>
  </div>
</template>

<script>
  const echarts = require('echarts')
  export default {
    name: 'patentstatistical',
    data() {
      return {
        value1: null
      };
    },

    mounted() {
      if(sessionStorage.getItem('patentstatistical')){
        this.value1 = JSON.parse(sessionStorage.getItem('patentstatistical'))
        sessionStorage.removeItem('patentstatistical')
      }
      const list = this.value1 || this.timePeriod(11)
      const date = this.getMonthAll(list[0],list[1])
      this.getScientificInfo(date)
    },

    methods: {
      goInfo(){
        sessionStorage.setItem('patentstatistical',JSON.stringify(this.value1))
        this.$router.push('/achievements/statistical')
      },
      timePeriod(number) {
        const end = new Date();
        const start = new Date();
        start.setMonth(start.getMonth() - number);
        return [start.getTime(),end.getTime() ]
      },
      onChange(val) {
        const dateList = this.getMonthAll(val[0], val[1])
        this.getScientificInfo(dateList)
      },
      getMonthAll(startTime, endTime) { // startTime 和 endTime 格式为任意格式
        const len = (Number(endTime) - Number(startTime)) / (24 * 60 * 60 * 1000)
        const day = new Date(Number(startTime) + 24 * 60 * 60 * 1000);
        let month = new Date(Number(startTime) + 24 * 60 * 60 * 1000).getMonth();
        const res = [];
        res.push(`${day.getFullYear()}-${month + 1}`);
        for (let i = 0; i <= len; i++) {
          const dayNew = new Date(Number(startTime) + i * 24 * 60 * 60 * 1000);
          const monthNew = new Date(Number(startTime) + i * 24 * 60 * 60 * 1000).getMonth();
          if (monthNew !== month) {
            res.push(`${dayNew.getFullYear()}-${monthNew + 1}`);
            month = monthNew;
          }
        }
        return res;
      },
      getScientificInfo(dateList) {
        const arr  = Array(dateList.length).fill(0)
        const SCEoption = {
          tooltip: {
            trigger: 'axis',
            // formatter: "{a} <br/>{b} : {c}"
          },
          legend: {
            left: "center", //图例组件离容器左侧的距离
          },
          xAxis: {
            type: 'category',
            data: dateList,
          },
          yAxis: {
            type: 'value',
            name: '数量',
          },
          series: [{
            name: '专利',
            type: 'line',
            data: arr,
          }, {
            name: '软著',
            type: 'line',
            data: arr,
          }, {
            name: '商标',
            type: 'line',
            data: arr,
          }]
        }
        const chart = echarts.init(this.$refs.SCEchart)
        chart.clear()
        chart.setOption(SCEoption)
        window.onresize = function () {
          chart.resize()
        }
      },
    },
  };
</script>
<style lang="less" scoped>
.SCEchart{
  width: 80vw;
  height: 70vh;
}
</style>